<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title> test ratchet </title>

    <meta name="viewport" content="initial-scale=1, maximum-scale=1">

    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link href="http://cdn.bootcss.com/ratchet/2.0.2/css/ratchet.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/ratchet/2.0.2/css/ratchet-theme-ios.min.css" rel="stylesheet">

	<style>
	form {
		padding: 10px;
	}

	.toggle {
		margin: 5px;
	}

	.slide img {
		width: 100%;
	}
	</style>

  </head>
  <body>

    <header class="bar bar-nav">
		<h1 class="title">XX</h1>
		<a class="icon icon-right-nav pull-right" href="#page2">page2</a>
    </header>

	<div class="content">
		<!-- fade -->
		<a href="test-ratchet2.html" data-transition="slide-in">another page</a>
	</div>

	<div id="page2" class="modal">
		<header class="bar bar-nav">
			<h1 class="title">yy</h1>
			<a class="icon icon-left-nav pull-left" href="#page2">page1</a>
			<a class="icon icon-right-nav pull-right" href="#page3">page3</a>
		</header>

		<div class="content">
			<form>
				<div class="toggle active">
				  <div class="toggle-handle"></div>
				</div>
				<div class="toggle">
				  <div class="toggle-handle"></div>
				</div>
			</form>
		</div>
	</div>

	<div id="page3" class="modal">
		<header class="bar bar-nav">
			<h1 class="title">zz</h1>
			<a class="icon icon-left-nav pull-left" href="#page3">page2</a>
			<a class="icon icon-right-nav pull-right" href="#page4">page4</a>
		</header>

		<div class="content">
			<form>
				<input type="text" placeholder="Full name">
				<input type="search" placeholder="Search">
				<textarea rows="5"></textarea>
				<button class="btn btn-positive btn-block">Choose existing</button>
			</form>
		</div>
	</div>

	<div id="page4" class="modal">
		<header class="bar bar-nav">
			<h1 class="title">4</h1>
			<a class="icon icon-left-nav pull-left" href="#page4">page3</a>
			<a class="icon icon-right-nav pull-right" href="#page5">page5</a>
		</header>

		<div class="content">
			<div class="slider" id="mySlider">
			  <div class="slide-group">
				<div class="slide">
				  <img src="img/slide-1.jpg">
				  <span class="slide-text">
					<span class="icon icon-left-nav"></span>
					Slide me
				  </span>
				</div>
				<div class="slide">
				  <img src="img/slide-2.jpg">
				</div>
				<div class="slide">
				  <img src="img/slide-3.jpg">
				</div>
			  </div>
			</div>
		</div>
	</div>


	<div id="page5" class="modal">
		<header class="bar bar-nav">
			<h1 class="title">5</h1>
			<a class="icon icon-left-nav pull-left" href="#page5">page4</a>
		</header>

		<div class="content">
			
		</div>
	</div>

  </body>
</html>

<script src="http://cdn.bootcss.com/ratchet/2.0.2/js/ratchet.js"></script>

<script type="text/javascript">
window.addEventListener('push', function(e){
	console.log(e.detail.state);
});
</script>
